<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor远程控制</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        // 配置marked.js
        if (typeof marked !== 'undefined') {
            marked.setOptions({
                breaks: true,       // 将换行符转换为<br>
                gfm: true,          // 启用GitHub风格的Markdown
                headerIds: true,    // 为标题添加ID
                sanitize: false     // 允许HTML标签
            });
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QLWZJD2E5W"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-QLWZJD2E5W');
    </script>
</head>
<body class="light-mode">
    <div class="app-container">
        <header class="app-header">
            <h1 class="app-title">Cursor远程控制</h1>
            <div class="header-actions">
                <button id="historyButton" class="tool-button" title="命令历史">
                    <i class="ri-history-line"></i>
                </button>
                <button id="statusButton" class="tool-button" title="系统状态">
                    <i class="ri-dashboard-line"></i>
                </button>
                <button id="recoveryButton" class="tool-button recovery-button" title="恢复丢失的结果" onclick="checkAndRecoverMissingResults()">
                    <i class="ri-first-aid-kit-line"></i>
                </button>
                <button id="refreshButton" class="tool-button refresh-button" title="刷新页面状态" onclick="forceRefreshPageState()">
                    <i class="ri-restart-line"></i>
                </button>
                <button id="themeToggle" class="theme-toggle-button" title="切换主题">
                    <i class="ri-moon-line"></i>
                </button>
                <div class="status-indicator">
                    <span class="status-dot" id="connectionStatus"></span>
                    <span id="statusText">未连接</span>
                </div>
                <a href="https://github.com/terryso/cursor_remote" target="_blank" rel="noopener noreferrer" class="github-link" title="查看项目源码">
                    <i class="ri-github-fill"></i>
                </a>
            </div>
        </header>

        <main class="main-content">
            <div class="chat-container" id="chatContainer">
                <!-- 欢迎消息 -->
                <div class="message system-message">
                    <div class="message-content">
                        <p>欢迎使用Cursor远程控制！请输入您想问Cursor的问题。</p>
                    </div>
                </div>
                <!-- 聊天内容将在这里动态添加 -->
            </div>
            
            <div class="input-wrapper">
                <div class="input-container">
                    <textarea id="messageInput" placeholder="输入您想问Cursor的问题..." rows="1"></textarea>
                    <div class="input-buttons">
                        <div class="input-tools">
                            <button class="tool-button" title="上传文件">
                                <i class="ri-add-line"></i>
                            </button>
                        </div>
                        <button id="sendButton" class="send-button" aria-label="发送提示" title="发送">
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.99992 14.9993V5.41334L4.70696 8.70631C4.31643 9.09683 3.68342 9.09683 3.29289 8.70631C2.90237 8.31578 2.90237 7.68277 3.29289 7.29225L8.29289 2.29225L8.36906 2.22389C8.76184 1.90354 9.34084 1.92613 9.70696 2.29225L14.707 7.29225L14.7753 7.36842C15.0957 7.76119 15.0731 8.34019 14.707 8.70631C14.3408 9.07242 13.7618 9.09502 13.3691 8.77467L13.2929 8.70631L9.99992 5.41334V14.9993C9.99992 15.5516 9.55221 15.9993 8.99992 15.9993C8.44764 15.9993 7.99993 15.5516 7.99992 14.9993Z" fill="currentColor"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="input-footer">
                    <span class="input-tip">Enter 换行 / Ctrl+Enter 发送</span>
                </div>
            </div>
            
            <!-- 添加回到底部按钮 -->
            <button id="scrollToBottomBtn" class="scroll-to-bottom-btn" title="回到底部">
                <i class="ri-arrow-down-line"></i>
            </button>
        </main>
    </div>
    
    <!-- 加载动画模板 -->
    <template id="loadingTemplate">
        <div class="message assistant-message loading-message">
            <div class="loading-animation">
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
            </div>
        </div>
    </template>
    
    <!-- 用户消息模板 -->
    <template id="userMessageTemplate">
        <div class="message user-message">
            <div class="message-content">
            </div>
            <div class="action-buttons">
                <button class="action-button copy-button" title="复制消息">
                    <i class="ri-clipboard-line"></i>
                </button>
            </div>
        </div>
    </template>
    
    <!-- 助手消息模板 -->
    <template id="assistantMessageTemplate">
        <div class="message assistant-message">
            <div class="message-content">
            </div>
            <div class="action-buttons">
                <button class="action-button copy-button" title="复制回复">
                    <i class="ri-clipboard-line"></i>
                </button>
            </div>
        </div>
    </template>
    
    <!-- 命令历史模态窗口 -->
    <div id="historyModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>命令历史</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="history-filters">
                    <input type="text" id="historySearch" placeholder="搜索命令..." class="search-input">
                </div>
                <div id="historyList" class="history-list">
                    <!-- 历史记录将在这里动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 系统状态模态窗口 -->
    <div id="statusModal" class="modal">
        <div class="modal-content large">
            <div class="modal-header">
                <h3>系统状态</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="status-tabs">
                    <button class="status-tab active" data-tab="overview">概览</button>
                    <button class="status-tab" data-tab="analytics">分析</button>
                    <button class="status-tab" data-tab="queue">队列</button>
                    <button class="status-tab" data-tab="system">系统</button>
                </div>
                
                <div class="status-content">
                    <!-- 概览标签页 -->
                    <div id="overviewTab" class="status-tab-content active">
                        <div class="status-cards">
                            <div class="status-card">
                                <h4>连接状态</h4>
                                <div id="connectionInfo" class="status-value">检查中...</div>
                            </div>
                            <div class="status-card">
                                <h4>今日命令</h4>
                                <div id="todayCommands" class="status-value">0</div>
                            </div>
                            <div class="status-card">
                                <h4>成功率</h4>
                                <div id="successRate" class="status-value">--</div>
                            </div>
                            <div class="status-card">
                                <h4>平均响应时间</h4>
                                <div id="avgResponseTime" class="status-value">--</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分析标签页 -->
                    <div id="analyticsTab" class="status-tab-content">
                        <div class="analytics-section">
                            <h4>命令统计</h4>
                            <div id="commandStats" class="stats-container">
                                <!-- 统计图表将在这里渲染 -->
                            </div>
                        </div>
                        <div class="analytics-section">
                            <h4>使用趋势</h4>
                            <div id="usageTrends" class="trends-container">
                                <!-- 趋势图表将在这里渲染 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 队列标签页 -->
                    <div id="queueTab" class="status-tab-content">
                        <div class="queue-info">
                            <div class="queue-stats">
                                <span>队列长度: <strong id="queueLength">0</strong></span>
                                <span>处理中: <strong id="processingCount">0</strong></span>
                                <span>失败重试: <strong id="retryCount">0</strong></span>
                            </div>
                            <div id="queueList" class="queue-list">
                                <!-- 队列项目将在这里显示 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 系统标签页 -->
                    <div id="systemTab" class="status-tab-content">
                        <div class="system-metrics">
                            <div class="metric-row">
                                <span>CPU使用率:</span>
                                <div class="progress-bar">
                                    <div id="cpuUsage" class="progress-fill"></div>
                                </div>
                                <span id="cpuValue">0%</span>
                            </div>
                            <div class="metric-row">
                                <span>内存使用率:</span>
                                <div class="progress-bar">
                                    <div id="memoryUsage" class="progress-fill"></div>
                                </div>
                                <span id="memoryValue">0%</span>
                            </div>
                            <div class="metric-row">
                                <span>运行时间:</span>
                                <span id="uptime">--</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="env-config.js"></script>
    <script src="enhancement.js"></script>
    <script src="systemMonitor.js"></script>
    <script src="app.js"></script>
</body>
</html>